<template>
  <el-drawer
    v-model="drawer"
    :before-close="handleClose"
    :direction="propDirection"
    :size="propsSize"
  >
    <slot name="content">这是drawer内容</slot>
  </el-drawer>
</template>

<script>
  export default {
    name: 'HtmlEditor',
    components: {},
    props: {
      modelValue: {
        type: Boolean,
        default: false,
      },
      direction: {
        type: String,
        default: 'btt',
      },
      size: {
        type: String,
        default: '',
      },
    },
    emits: {
      'update:model-value': null,
    },
    setup(props, { emit }) {
      const drawer = ref(false)

      const propsModelValue = ref(props.modelValue)
      const propDirection = ref(props.direction)
      const propsSize = ref(props.size)

      const handleClose = () => {
        emit('update:model-value', false)
      }

      watch(
        () => props.modelValue,
        (newVal) => {
          console.info(`watch>>>>>>>>>>>>>>${newVal}`)
          if (newVal == null) {
            return
          }
          drawer.value = newVal
        }
      )

      return {
        drawer,
        propsModelValue,
        propDirection,
        propsSize,
        handleClose,
      }
    },
  }
</script>

<style lang="scss" scoped></style>
